<template>
    <Menu active-name="22-1" theme="light" width="auto" :accordion="true" class="collapsed-menu">                       
        <MenuItem name="home" to="/" >
            <Icon type="ios-home"></Icon>
            HOME
        </MenuItem>
        <Submenu name="团队">
            <template slot="title">
                <Icon type="ios-navigate"></Icon>
                团队
            </template>
            <MenuItem name="1-1" to="/team" >团队结算汇总</MenuItem>
            <MenuItem name="1-2" to="/use">团队收入明细</MenuItem>
            <MenuItem name="1-3" >团队支出明细</MenuItem>
        </Submenu>
        <Submenu name="散客">
            <template slot="title">
                <Icon type="ios-keypad"></Icon>
                散客
            </template>
            <MenuItem name="2-1" to="/test">散客结算汇总</MenuItem>
            <MenuItem name="2-2">散客收入明细</MenuItem>
            <MenuItem name="2-3">散客支出明细</MenuItem>
        </Submenu>
        <Submenu name="单项">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                单项
            </template>
            <MenuItem name="3-1" >单项结算汇总</MenuItem>            
        </Submenu>
        <Submenu name="二维码">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                二维码
            </template>
            <MenuItem name="4-1" >二维码结算汇总</MenuItem>            
        </Submenu>
        <Submenu name="现票">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                现票
            </template>
            <MenuItem name="5-1" >现票结算汇总</MenuItem>  
            <MenuItem name="5-2" >现票库存录入</MenuItem>                   
        </Submenu>
        <Submenu name="费用">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                费用
            </template>
            <MenuItem name="6-1" >费用结算汇总</MenuItem>  
            <MenuItem name="6-2" >费用收入明细</MenuItem>   
            <MenuItem name="6-3" >费用支出明细</MenuItem>                  
        </Submenu>
        <Submenu name="项目">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                项目
            </template>
            <MenuItem name="7-1" >项目结算汇总</MenuItem>  
            <MenuItem name="7-2" >项目收入明细</MenuItem>   
            <MenuItem name="7-3" >项目支出明细</MenuItem>                  
        </Submenu>
        <Submenu name="往来帐">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                往来帐
            </template>
            <MenuItem name="8-1" >应收款明细</MenuItem>  
            <MenuItem name="8-2" >应付款明细</MenuItem>   
            <MenuItem name="8-3" >礼品申领表</MenuItem>  
            <MenuItem name="8-4" >发票明细表</MenuItem>                 
        </Submenu>
        <Submenu name="流水帐">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                流水帐
            </template>
            <MenuItem name="9-1" >收款流水帐</MenuItem>  
            <MenuItem name="9-2" >付款流水帐</MenuItem>   
            <MenuItem name="9-3" >帐户设定</MenuItem>  
            <MenuItem name="9-4" >帐户转款</MenuItem> 
            <MenuItem name="9-5" >科目三栏帐</MenuItem>                        
        </Submenu>
        <Submenu name="用户">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                用户
            </template>         
            <MenuItem name="10-7" to="/branch">部门管理</MenuItem>    
            <MenuItem name="10-4" to="/manager">用户管理</MenuItem> 
            <MenuItem name="10-5" to="/role">角色管理</MenuItem>             
        </Submenu>
        <Submenu name="档案">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                档案
            </template>
            <MenuItem name="10-1" to="/client">客户管理</MenuItem>  
            <MenuItem name="10-2" to="/guest">客人管理</MenuItem>   
            <MenuItem name="10-3" to="/supplier">供应商管理</MenuItem> 
            <MenuItem name="10-6" to="/category">项目类别管理</MenuItem>       
            <MenuItem name="10-8" to="/guide">导游管理</MenuItem>                      
        </Submenu>
        <Submenu name="报表">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                报表
            </template>
            <MenuItem name="11-1" >财务报表</MenuItem>
        </Submenu>
    </Menu>
    
</template>

<script>
export default {
    name: 'Left'
}
</script>

<style>   
     .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
